<template>
  <div >
    <div class="lists">
      <div  class="detail" v-if="names">
        <div class="detail_list">
          <div class="names">
            <p class="name_li">
              <span class="s1">产妇姓名:</span>
              <span class="s2">{{detail.mother_name}}</span>
            </p>
            <p class="name_li">
              <span class="s3">检测项目:</span>
              <span class="s4">{{detail.check_type}}</span>
            </p>
          </div>
          <div class="names">
            <p class="name_li">
              <span class="s1">采血时间:</span>
              <span class="s2">{{detail.takeblood_date}}</span>
            </p>
            <p class="name_li">
              <span class="s3">报告时间:</span>
              <span class="s4">{{detail.report_date}}</span>
            </p>
          </div>
          <div class="names">
            <p class="name_li">
              <span class="s1">采血卡号:</span>
              <span class="s2">{{detail.card_no}} </span>
            </p>
            <p class="name_li">
              <span class="s3">送检单位:</span>
              <span class="s4">{{detail.dep_name}}</span>
            </p>
          </div>
      </div>
    </div>
    </div>
      <div class="tables">
        <table id="tab"  v-if="tab">
          <tr class="tr1" v-show="detail.items.length !== 0">
            <td class="t1" >项目名称</td>
              <td class="t2">结果</td>
              <td class="t3">单位</td>
              <td class="t4">参考值</td>
              <td class="t5">结果判断</td>
            </tr>
              <tr class="tr2" v-for="(item, index) of detail.items" :key="index" else >
                <td >{{item.item_name}}</td>
                <td >{{item.val}}</td>
                <td >{{item.dw}}</td>
                <td >{{item.ref_val}}</td>
                <td class='computed' :class="{active: item.result === '阳性' }">{{item.result}}</td>
              </tr>
              <div v-show="detail.items.length === 0" class="were">暂时查无结果...</div>

        </table>
        <div class="ts" v-if="ts" >
          <p class="ts1">串联质谱</p>
          <p class="ts2" @click="viewDetails">查看详情</p>
          <p class="ts3 computed" :class="{actives: detail.clzp_result === '0' }" >{{detail.clzp_result === "0" ? '阳性': '阴性'}}</p>
          <!-- <p class="ts3" else >{{detail.clzp_result === null ? '阴性': '阳性'}}</p> -->
        </div>
        <!-- <v-tsdata :tsdata="tsdatas" v-if="tsshow"></v-tsdata> -->
        <div class="index_nav"  v-if="nav">
          <img class="m1" @click="sback" src="../assets/image/zuo.png">
          <img class="m2" src="../assets/image/logos.png"/>
          <span>广东省新筛中心结果查询平台</span>
        </div>
        <!-- <div v-if="clzp">串联质谱详情</div> -->
        <div class="table" v-if="tsdata">
          <table >
            <tr class="tr1" >
              <td class="t1" >项目名称</td>
                <td class="t2">结果</td>
                <td class="t3">单位</td>
                <td class="t4">参考值</td>
              </tr>
                <tr class="tr2" v-for="(item, index) of detail.clzp_items" :key="index" else >
                  <td >{{item.item_name}}</td>
                  <td class='computed' :class="{actives: item.result === '0' }">{{item.val}}</td>
                  <td >{{item.dw}}</td>
                  <td >{{item.ref_val}}</td>
                </tr>

          </table>
        </div>
        <div class="result" v-if="tsres">
          <span class="r_p1">报告评价:</span>
          <span class="r_p2" >{{detail.clzp_report_pj}}</span>
        </div>
        <!--  -->

        <div class="result" v-if="res">
          <span class="r_p1">报告评价:</span>
          <span class="r_p2" >{{detail.report_pj}}</span>
        </div>
      </div>
  </div>
</template>

<script>
// import tsdata from './tsdata'

export default {
  props: ['detail'],
  data () {
    return {
      ts: false,
      // tsdatas: [],
      nav: false,
      tsdata: false,
      tsres: false,
      // clzp: false,
      // tsshow: false,
      names: true,
      tab: true,
      res: true
    }
  },
  mounted () {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }

    // this.tsdatas = this.detail
    // console.log('tsdata', this.tsdatas)
    // console.log('12346', this.detail.jcxm_ms)
    if (this.detail.jcxm_ms === '1') {
      this.ts = true
    } else {
      this.ts = false
    }
  },
  computed: {
  },
  methods: {
    goBack () {
      this.$router.push('/brother')
    },
    viewDetails () {
      this.names = false
      this.tab = false
      this.res = false
      this.ts = false
      this.nav = true
      this.tsdata = true
      this.tsres = true
      // this.clzp = true
    },
    sback () {
      this.names = true
      this.tab = true
      this.res = true
      this.ts = true
      this.nav = false
      this.tsdata = false
      this.tsres = false
      // this.clzp = false
    }
  },
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false)
  },
  components: {
    // 'v-tsdata': tsdata
  }
}
</script>

<style scoped lang="less">

  @import '../assets/less/detail.less';

</style>
